<template>
  <div class="facility">
    <detail-section title="房屋设施" more-text="查看全部内容 &gt;">
      <div class="facility-content">
        <template v-for="(item, index) in houseFacility?.houseFacilitys" :key="index">
          <div class="item" v-if="houseFacility?.facilitySort?.includes(index)">
            <div class="head">
              <img :src="item.icon" alt="">
              <div class="text">{{ item.groupName }}</div>
            </div>
            <div class="list">
              <template v-for="(iten, indey) in item.facilitys.slice(0, 4)" :key="indey">
                <div class="iten">
                  <i class="icon_check icon"></i>
                  <span class="name">{{ iten.name }}</span>
                </div>
              </template>
            </div>
          </div>
        </template>
      </div> 
    </detail-section>
  </div>
</template>

<script setup>
import detailSection from '@/components/detail-section/detail-section.vue'
const props =  defineProps({
    houseFacility: {
      type: Object,
      default: () => ({})
    }
  })
</script>

<style lang="less" scoped>
.facility-content {
  border-radius: 6px;
  background-color: rgb(250,250,250);
  .item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 10px;
    .head {
      display: flex;
      flex-direction: column;
      align-items: center;
      img{
        height: 20px;
        width: 20px;
      }
      .text {
        margin-top: 5px;
      }
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      .iten {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 70px;
        margin: 3px 25px;
        .icon_check {
          display: inline-block;
          width: 12px;
          height: 12px;
          background: url(@/assets/img/detail/icon_check.png) 0 0 / 100% 100%;
        }
        .icon {
          position: relative;
          right: 5px;
        }
        .name {
          
        }
      }
    }
  }
}
</style>
